
<template>
  <div>
    <div class="step">
      <el-steps :active="active"
                align-center
                v-if="showDescription">
        <el-step :title="item.name"
                 v-for="item in activities"
                 :key="item.name">
          <template slot="icon">
          </template>
          <template slot="description">
            <span class="step-span">
              <el-tooltip v-if="item.user && item.user.indexOf(',') !== -1"
                          placement="top"
                          :content="item.user">
                <div>
                  <span v-for="(i,index) in item.user.split(',')"
                        :key="index">
                    <span class="span-margin"
                          v-if="index === 0">{{i}}</span>
                    <span class="span-margin"
                          v-if="index === 1">{{i}}</span>
                    <span class="span-margin"
                          v-if="index === 2">...</span>
                  </span>
                </div>
              </el-tooltip>
              <span v-else>{{item.user}}</span>
            </span>
            <span v-if="item.time && item.user">{{item.time}}</span>
            <el-button v-if="item.isActive"
                       type="text"
                       @click="urge(item.userId)">{{$t('processDialog.hurryUp')}}</el-button>
          </template>
        </el-step>
      </el-steps>
      <el-tooltip class="view"
                  placement="top"
                  :content="$t('processDialog.viewHistory')">
        <el-button class="iconfont iconeye"
                   :size="size"
                   @click="$refs.processInfo.visible = true"></el-button>
      </el-tooltip>
    </div>
    <avue-crud class="process-crud"
               :option="auditOption"
               :data="auditData"
               :page="page"
               @size-change="sizeChange"
               @current-change="currentChange">
    </avue-crud>
    <processInfo ref="processInfo"
                 :objectId="objectId"
                 :tableName="tableName"></processInfo>
  </div>
</template>

<script>
import { auditOption } from './fileIcon'
import { getFlowTask, getFlowTaskPage, taskUrge } from '../../api/processManagement'
import processInfo from './processInfo'
import { mapGetters } from 'vuex'

export default {
  props: {
    size: {
      type: String,
      default: '',
      remark: '按钮尺寸'
    },
    objectId: {
      remark: '单据ID、必传',
      type: [Number,String]
    },
    tableName: {
      type: String,
      remark: '数据库表名（业务资源实体可以查到）'
    },
    showDescription: {
      remark: '是否显示步骤条',
      type: Boolean,
      default: true
    }
  },
  components: { processInfo },
  computed: mapGetters(['reloadAuditInfomation']),
  data () {
    return {
      active: 0,
      activities: [],
      auditOption: auditOption(this),
      auditData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
        pageSizes: [10, 50, 100, 300, 500]
      },
    }
  },
  watch: {
    objectId: {
      handler: 'getInfo',
      immediate: true
    },
    reloadAuditInfomation: {
      handler () {
        if (this.reloadAuditInfomation) this.getInfo()
      }
    }
  },
  methods: {
    getInfo () {
      if (this.validatenull(this.tableName) || this.validatenull(this.objectId)) {
        console.error('参数错误，请检查参数')
        return
      }
      this.getFlowTask()
      this.getList()
      this.$store.commit("SET_RELOADAUDITINFOMATION", false)
    },
    getFlowTask () {
      getFlowTask(this.objectId, this.tableName).then(res => {
        if (Array.isArray(res.data.data)) {
          this.$set(this, 'activities', res.data.data.map(item => {
            return {
              name: item.nodeName,
              user: item.assigneeName,
              userId: item.assignedTo,
              time: item.completeTime,
              isActive: item.isActive === 1
            }
          }))
          res.data.data.some((res, index) => {
            this.active = index + 1
            if (res.isActive === 1) return true
          })
        }
      })
    },
    sizeChange (val) {
      this.page.currentPage = 1
      this.page.pageSize = val
      this.getList()
    },
    currentChange (val) {
      this.page.currentPage = val
      this.getList()
    },
    getList () {
      const params = {
        current: this.page.currentPage,
        size: this.page.pageSize,
        tableName: this.tableName,
        objectId: this.objectId
      }
      getFlowTaskPage(params).then(res => {
        this.$set(this, 'auditData', res.data.data.records)
        this.$set(this.page, 'total', res.data.data.total)
      })
    },
    urge (assigneeIds) {
      taskUrge(assigneeIds, this.objectId, this.tableName).then(res => {
        this.$message({
          type: res.data.meta.success ? 'success' : 'error',
          message: res.data.meta.message
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.process-crud {
  /deep/.avue-crud__menu {
    display: none;
  }
}
.step {
  margin: 20px 0;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  position: relative;
  /deep/.el-steps {
    width: 100%;
  }
  .view {
    position: absolute;
    right: 0;
  }
  /deep/.el-step__main {
    text-align: center;
  }
  /deep/.el-step__title {
    text-align: center;
  }
  /deep/.el-step__description {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
  }
  .step-span {
    text-align: center;
  }
  .span-margin {
    margin-right: 5px;
  }
}
</style>